<template>
	<view class="">
		<!-- <view class="status_bar">
			这里是状态栏
		</view> -->
		<!-- <nav-bar title="八股文"></nav-bar> -->
		<view class="question">
			<top-scroll :list="cateList"></top-scroll>
			<scroll-view class="ques-list" :style="{'height':scollHeight}" scroll-y="true"
				@scrolltolower="scrolltolower">
				<view class="tn-margin-bottom-lg" style="margin-bottom: 0;">
					<block v-for="(item, index) in list" :key="index">
						<view class="article-shadow tn-margin" @click="tn('/pageA/news/news')">
							<view class="tn-flex">
								<view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
									<view class="tn-text-lg tn-text-bold clamp-text-1 tn-text-justify">
										<text class="">{{ item.ques_name }}</text>
									</view>
									<view class="tn-padding-top-xs" style="min-height: 90rpx;">
										<text class="tn-text-df tn-color-gray clamp-text-2 tn-text-justify">
											{{ item.desc || '我是描述' }}
										</text>
									</view>
									<view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-sm">
										<view :style="[getLevelStyle(item.level)]"
											class="tn-flex justify-content-item tn-tag-content__item tn-margin-right tn-text-sm tn-text-bold">
											{{item.level}}
										</view>
										<view class="tn-flex justify-content-item tn-color-gray tn-text-center"
											style="padding-top: 5rpx;">
											<text class="tn-icon-fire tn-text-lg" style="padding-right: 5rpx;"></text>
											<text
												class="tn-padding-right tn-text-df">{{ item.collectionCount || 89 }}</text>
											<text class="tn-icon-like-lack tn-text-lg"
												style="padding-right: 5rpx;"></text>
											<text class="tn-text-df">{{ item.likeCount || 58 }}</text>
										</view>
									</view>
								</view>
								<!-- 右侧有图片 -->
								<!-- 		<view class="image-pic tn-margin-sm"
								:style="'background-image:url(' + item.userAvatar + ')'">
								<view class="image-article">
								</view>
							</view> -->
							</view>
						</view>
					</block>
					<uni-load-more :status="status" />
				</view>
			</scroll-view>
		</view>
<!-- 		<jorbinMagicNavigationBar indicatorBackgroundColor='#ECFBF8' :items="dataList" :height="50">
		</jorbinMagicNavigationBar> -->
	</view>
</template>

<script>
	import jorbinMagicNavigationBar from "@/uni_modules/jorbin-MagicNavigationBar/components/jorbin-MagicNavigationBar/jorbin-MagicNavigationBar.vue"
	import {
		mapGetters
	} from "vuex";
	export default {
		components: {
			jorbinMagicNavigationBar
		},
		computed: {
			...mapGetters(['cateList', 'device_info']),
			scollHeight() {
				return this.device_info.windowHeight + 'px'
			},
			getLevelStyle() {
				return (item) => {
					if (item === '低') return {
						backgroundColor: '#D5FAF2',
						color: '#2DEAD2'
					}
					if (item === '中') return {
						backgroundColor: '#D8E5FF',
						color: '#3D9BFF'
					}
					if (item === '高') return {
						backgroundColor: '#FAD8D6',
						color: '#E83A50'
					}
				};
			},
		},

		data() {
			return {
				status: 'more',
				list: [],
				pageSize: 10,
				currentSize: 0,
				news: [{
						userAvatar: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
						userName: '可我会像',
						date: '2021年12月20日',
						color: 'cyan',
						label: ['模型'],
						title: '一个拥有大量3D模型的网站,一个拥有大量3D模型的网站,一个拥有大量3D模型的网站,一个拥有大量3D模型的网站',
						desc: '3D模型了解一下？',
						mainImage: 'https://resource.tuniaokj.com/images/shop/prototype1.jpg',
						viewUser: {
							latestUserAvatar: [{
									src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
								},
								{
									src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
								},
								{
									src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
								},
								{
									src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
								},
							],
							viewUserCount: 987
						},
						collectionCount: 567,
						commentCount: 69,
						likeCount: 65
					},
					{
						userAvatar: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
						userName: '可我会像',
						date: '2021年12月20日',
						color: 'blue',
						label: ['UI设计'],
						title: '为什么资讯不显示时间？',
						desc: '你确定你经常更新文章吗？',
						mainImage: 'https://resource.tuniaokj.com/images/shop/computer2.jpg',
						viewUser: {
							latestUserAvatar: [{
									src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg'
								},
								{
									src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg'
								},
								{
									src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg'
								},
								{
									src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg'
								},
							],
							viewUserCount: 321
						},
						collectionCount: 654,
						commentCount: 232,
						likeCount: 543
					}
				],
				dataList: [{
						text: "dashbord", //导航栏选项的文字
						icon: {
							width: 30, //导航栏选项的图片宽,1.0.0的是with，之后版本都是width
							height: 30, //导航栏选项的图片高
							src: require("@/static/tab_icons/home.png") //图片地址
						}
					},
					{
						text: "store",
						icon: {
							width: 30,
							height: 30,
							src: require("@/static/tab_icons/question.png")
						}
					},
					{
						text: "setting",
						icon: {
							width: 30,
							height: 30,
							src: require("@/static/tab_icons/exam.png")
						}
					},
					{
						text: "setting",
						icon: {
							width: 30,
							height: 30,
							src: require("@/static/tab_icons/share.png")
						}
					},
					{
						text: "setting",
						icon: {
							width: 30,
							height: 30,
							src: require("@/static/tab_icons/my.png")
						}
					},

				]
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			async getList() {
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/question/questionData', {
					pageSize: this.pageSize,
					currentSize: this.currentSize
				})
				// 请求失败
				if (res.meta.status !== 200) return uni.$showMsg('列表获取失败')
				if (!res.message.length) return this.status = 'nomore'
				this.list = [...this.list, ...res.message]
				this.status = 'more'
			},
			scrolltolower() {
				if (this.status === 'nomore') return
				console.log('到底部了')
				this.status = 'loading'
				this.currentSize += 1
				this.getList()
			}
		}
	}
</script>

<style scoped lang="scss">
	.ques-list {
		margin-top: $baseMarginTop;
		background-color: #fff;
	}

	text {
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>
<style scoped lang="scss">
	.image-pic {
		border: 1rpx solid #F8F7F8;
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 10rpx;
	}

	/* 资讯主图 start*/
	.image-article {
		border-radius: 8rpx;
		width: 200rpx;
		height: 200rpx;
		position: relative;
	}

	.tn-tag-content__item {
		display: inline-block;
		line-height: 35rpx;
		color: #1D2541;
		background-color: #F3F2F7;
		border-radius: 10rpx;
		font-size: 22rpx;
		padding: 5rpx 15rpx;
	}

	.article-shadow {
		background-color: #fff;
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}
</style>
